<template>
	<view class="business">
		<view class="theader">
			<!-- 搜索 -->
			<view class="search-index">
				<view class="icon">
					<image class="icon-img" src="/static/d-i1.png"></image>{{infor.title}}
				</view>
				<view class="search box-1">
					<view class="iconfont icon-fadajing"></view>
					<input type="text" :value="sort"@input="findSearch" placeholder="输入搜索内容" />
				</view>
			</view>
			
		</view>
		<!-- 列表 -->
		<view class="content">
			<view class="title">已核销券 <text>{{infor.num}}</text>张</view>
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
				<block v-if="list.length">
					<view class="list" v-for="(item,index) in list" :key="index">
						<view class="head flex-box">
							<view class="left"><image :src="item.headimg"></image></view>
							<view class="right box-1">
								<view class="name">{{item.nickname}}</view>
								<view class="tel">{{item.tel}}</view>
							</view>
						</view>
						<view class="bm">
							<view class="li flex-box">
								<text>服务内容：</text><text class="bt">{{item.title}}</text>
							</view>
							<view class="li flex-box">
								<text>核销时间：</text><text class="bt">{{item.update_time}}</text>
							</view>
						 	<view class="li flex-box">
								<text>核销券码：</text><text class="bt">{{item.code}}</text>
							</view>
							<view class="li flex-box">
								<text>核销门店：</text><text class="bt">{{infor.title}}</text>
							</view>
						</view>
						
					</view>
				</block>
				<block v-else>
					<view >
						<u-empty mode="data" marginTop="100" text="  "></u-empty>
					</view>
				</block>
				
			</mescroll-body>
		</view>
		<view class="btn" @click="saoCode">扫码验券</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				list:[],
				infor:{},
				pageHeight: 500,
				page:1,
				pageSize:10,
				sort:''
			};
		},
		onLoad() {
			//动态修改状态栏的颜色
			uni.setNavigationBarColor({
				frontColor:"#ffffff",
				backgroundColor:"#ae87d8"
			})
			this.getData()
			// this.getCouponList()
		},
		methods:{
			// 搜索
			findSearch(e){
				console.log(e.detail,'search')
				this.sort = e.detail.value
				this.upCallback()
			},
			/*上拉加载的回调*/
			  upCallback(page) {
			    //联网加载数据
				let _this = this
			    this.$u.api.storeCouponList({page:this.page,so:this.sort}).then(res=>{
					  console.log(res,'商品列表')
			    	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			    	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
			    
			    	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			    	this.mescroll.endByPage(this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总页数)
			    
			    	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			    	//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
			    
			    	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			    	// this.mescroll.endSuccess(res.msg.length, false); //必传参数(当前页的数据个数, 是否有下一页true/false)
			      
			    	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
			    	// this.mescroll.endSuccess(res.list.length);
					if(_this.page == 1){_this.list = [];} //如果是第一页需手动制空列表
					_this.list =  _this.list.concat(res.msg.list); //如果是第一页需手动制空列表
					// this.list =  res.msg.list; //如果是第一页需手动制空列表
					return false
			    // 	//设置列表数据
			//     	if(this.page == 1||this.page<res.msg.totalPage){
					// 	this.goodsList =  res.msg.list; //如果是第一页需手动制空列表
					// }else{
					// 	this.goodsList = this.goodsList.concat(res.msg.list); // 注意不是this.msgList.concat
					// }
			    }).catch(()=>{
			    	//联网失败, 结束加载
			    	this.mescroll.endErr();
			    })
			  },
			getData(){
				this.$u.api.storeIndex().then(res => {
					console.log(res,'list')
						if (res.status) {
							this.infor = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			getCouponList(){
				this.$u.api.storeCouponList().then(res => {
					console.log(res,'list')
						if (res.status) {
							this.list = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			saoCode(){
				let _this = this
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						let url = res.result;
						let option = JSON.parse(res.result);
						_this.code = url
						_this.getStoreCouponOff()
					}
				});
			},
			//
			getStoreCouponOff(){
				// console.log(this.code,'code')
				let _this = this
				// uni.showLoading({
				//     title: '加载中'
				// });
				
				this.$u.api.storeCouponOff({
					code: this.code,
					}).then(res=>{
					console.log(res,'data 核销信息')
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000,
						success:function() {
							_this.upCallback()
						}
					})
				})
			},
			
		}
	}
</script>

<style lang="scss">
@import 'Business.scss';
</style>
